﻿//准备ExtJS环境
Ext.require
(
    [
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.chart.*',
        'Ext.form.*'
    ]
);

//组织结构数据存储
var store_organization;

//检索窗体
var win_search = null;

//处理刷新按钮点击事件
function onRefreshClick()
{
    //获得表格控件
    var grid = Ext.getCmp('comparison_station_grid');

    //判断控件是否有效
    if (grid && grid.store.filters.length > 0)
    {
        //刷新数据
        grid.store.load();
    }
};

//处理检索按钮点击事件
function onSearchClick()
{
    //获得表格控件
    var grid = Ext.getCmp('comparison_station_grid');

    //获得数据存储对象
    var store = grid.store;

    //判定窗体是否已经创建
    if (!win_search)
    {
        //创建窗体
        win_search = Ext.create
        (
            'Ext.window.Window',
            {
                title: '检索数据',
                maximizable: false,
                maximized: false,
                width: 360,
                height: 240,
                autoScroll: false,
                bodyBorder: false,
                draggable: true,
                isTopContainer: true,
                modal: true,
                resizable: false,
                bodyPadding: 0,
                closeAction: 'hide',
                layout: 'fit',
                defaultFocus: 'cboStation',
                items:
                [
                    {
                        xtype: 'form',
                        frame: false,
                        bodyPadding: 12,
                        bodyStyle: 'background-color:White;margin:0;',
                        bodyBorder: false,
                        border: 0,
                        defaultType: 'textfield',
                        fieldDefaults:
                        {
                            labelAlign: 'left',
                            labelWidth: 72,
                            anchor: '100%'
                        },
                        items:
                        [
                            {
                                xtype: 'combobox',
                                name: 'st_code',
                                itemId: 'cboStation',
                                fieldLabel: '测　　站',
                                emptyText: '测站',
                                store: store_master_station,
                                displayField: 'Name',
                                valueField: 'ID',
                                queryMode: 'local',
                                hideTrigger: false,
                                forceSelection: true,
                                typeAhead: true,
                                autocomplete: true,
                                allowBlank: false
                            },
                            {
                                xtype: 'panel',
                                layout:
                                {
                                    type: 'hbox'
                                },
                                border: 0,
                                items:
                                [
                                    {
                                        xtype: 'datefield',
                                        width: 187,
                                        itemId: 'txtDate_L',
                                        fieldLabel: '时间范围',
                                        format: 'Y/m/d',
                                        allowBlank: false,
                                        vtype: 'dateRange',
                                        endDateField: 'txtDate_H',
                                        minValue: '2010/1/1'
                                    },
                                    {
                                        xtype: 'displayfield',
                                        value: '~',
                                        flex: 1
                                    },
                                    {
                                        width: 110,
                                        xtype: 'datefield',
                                        itemId: 'txtDate_H',
                                        format: 'Y/m/d',
                                        allowBlank: false,
                                        vtype: 'dateRange',
                                        beginDateField: 'txtDate_L',
                                        minValue: '2010/1/1',
                                        maxValue: new Date()
                                    }
                                ]
                            }
                        ],
                        buttons:
                        [
                            {
                                text: '确定',
                                height: 26,
                                margin: 3,
                                handler: function ()
                                {
                                    //获得表单对象
                                    var form = this.up('form');

                                    //检查数据是否合法
                                    if (form.getForm().isValid())
                                    {
                                        //隐藏窗体
                                        this.up('window').hide();

                                        //清除过滤条件
                                        store.filters.clear();

                                        //过滤数据
                                        store.filter
                                        (
                                            [
                                                {
                                                    property: 'st_code',
                                                    value: form.down('#cboStation').getValue()
                                                },
                                                {
                                                    property: 'dt_L',
                                                    value: form.down('#txtDate_L').getValue()
                                                },
                                                {
                                                    property: 'dt_H',
                                                    value: form.down('#txtDate_H').getValue()
                                                }
                                            ]
                                        );
                                    }
                                }
                            },
                            {
                                text: '取消',
                                height: 26,
                                margin: 3,
                                handler: function ()
                                {
                                    //隐藏窗体
                                    this.up('window').hide();
                                }
                            }
                        ]
                    }
                ]
            }
        );
    }

    //显示窗体
    win_search.show();
}

//定义用户表格控件
Ext.define
(
    'SingleStation.Panel',
    {
        extend: 'Ext.Panel'
    }
);

//挂接环境准备完毕事件
Ext.onReady
(
    function ()
    {
        //初始化快速提示
        Ext.QuickTips.init();

        //设置状态保存提供者（当前设置为Cookie）
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', { path: _Current_ActionUrl }));

        //初始化附加验证类型
        Common.InitAdditionalValidation();

        //创建单位类型存储存储对象
        store_master_station = Ext.create
        (
            'Ext.data.Store',
            {
                fields: ['ID', 'Name'],
                data: master_station
            }
        );

        //创建数据存储对象
        var store = Ext.create
        (
            'Ext.data.Store',
            {
                pageSize: 100,
                autoSync: false,
                autoLoad: false,
                root: 'data',
                remoteFilter: true,
                remoteSort: true,
                model: 'StationWaterListRow',
                sorters:
                [
                    {
                        property: 'dt',
                        direction: 'ASC'
                    }
                ],
                proxy:
                {
                    type: 'ajax',
                    batchActions: false,
                    url: Common.MakeAbsoluteUrl('Select'),
                    reader:
                    {
                        type: 'json',
                        root: 'data'
                    },
                    listeners:
                    {
                        exception: function (proxy, response, operation, options)
                        {
                            //处理错误
                            Common.HandleProxyError(proxy, response, operation, options);
                        }
                    }
                }
            }
        );

        //创建表格
        var grid = Ext.create
        (
            'Ext.grid.Panel',
            {
                store: store,
                border: 0,
                stateful: true,
                stateId: 'comparison_station_grid_state',
                height: 600,
                width: 540,
                id: 'comparison_station_grid',
                title: '',
                columnLines: true,
                listeners:
                {
                    //设置两个指头的滚动
                    render: Common.ScrollableRender
                },
                viewConfig:
                {
                    stripeRows: true,
                    loadingText: '数据加载中...',
                    singleSelect: true
                },
                //创建分页工具栏
                bbar: Ext.create
                (
                    'Ext.PagingToolbar',
                    {
                        store: store,
                        displayInfo: true,
                        displayMsg: '第 {0} - 第 {1} 条记录，共 {2} 条记录',
                        emptyMsg: ''
                    }
                ),
                columns:
                [
                    {
                        text: '日期',
                        width: 140,
                        minWidth: 120,
                        sortable: true,
                        align: 'left',
                        renderer: Ext.util.Format.dateRenderer('Y/m/d H:i'),
                        dataIndex: 'dt'
                    },
                    {
                        text: '流量',
                        width: 140,
                        minWidth: 120,
                        sortable: true,
                        flex: 1,
                        align: 'right',
                        dataIndex: 'w_flow',
                        renderer: Ext.util.Format.numberRenderer('0,000.00'),
                        hideable: false
                    },
                    {
                        text: '水位',
                        width: 140,
                        minWidth: 120,
                        sortable: false,
                        flex: 1,
                        align: 'right',
                        dataIndex: 'w_level',
                        renderer: Ext.util.Format.numberRenderer('0,000.00'),
                        hideable: false
                    }
                ]
            }
        );

        //创建面板
        Ext.create('SingleStation.Panel',
        {
            id: 'comparison_station_panel',
            border: 1,
            width: '100%',
            height: 600,
            title: '',
            dockedItems:
            [
                {
                    xtype: 'toolbar',
                    height: 36,
                    items:
                    [
                        {
                            iconCls: 'icon-refresh',
                            text: '刷新',
                            scope: this,
                            hidden: false,
                            tooltip: '刷新数据',
                            handler: this.onRefreshClick
                        },
                        '-',
                        {
                            iconCls: 'icon-search',
                            text: '检索',
                            itemId: 'account-search',
                            scope: this,
                            hidden: false,
                            tooltip: '检索水情',
                            handler: this.onSearchClick
                        }
                    ]
                }
            ],
            layout:
            {
                type: 'hbox',
                align: 'stretch'
            },
            renderTo: 'data-grid',
            items:
            [
                grid,
                {
                    xtype: 'panel',
                    bodyStyle: 'background:#D0D0D0',
                    border: 0,
                    width: 1,
                    title: ''
                },
                {
                    xtype: 'chart',
                    margin: 9,
                    flex: 1,
                    store: store,
                    id: 'comparison_station_chart',
                    shadow: false,
                    legend:
                    {
                        position: 'right',
                        update: false,
                        boxStrokeWidth: 0
                    },
                    axes:
                    [
                        {
                            type: 'Numeric',
                            position: 'left',
                            fields: ['w_flow', 'w_level'],
                            title: '流量',
                            grid: true
                        },
                        {
                            type: 'Time',
                            position: 'bottom',
                            fields: 'dt',
                            title: '日期',
                            dateFormat: 'Y/m/d',
                            constrain: false,
                            grid: true
                        }
                   ],
                    series:
                   [
                        {
                            type: 'line',
                            axis: ['left', 'bottom'],
                            xField: 'dt',
                            yField: 'w_flow',
                            highlight:
                            {
                                size: 3,
                                radius: 3,
                                'stroke-width': 0
                            },
                            title: '流量',
                            label:
                            {
                                display: '流量',
                                field: 'w_flow',
                                renderer: function (v) { return v >> 0; },
                                'text-anchor': 'middle'
                            },
                            style:
                            {
                                fill: "#FF0000",
                                stroke: "#FF0000",
                                'stroke-width': 2
                            },
                            markerConfig:
                            {
                                type: 'circle',
                                radius: 3,
                                size: 1,
                                fill: "#FF0000",
                                'stroke-width': 0
                            }
                        },
                        {
                            type: 'line',
                            axis: ['left', 'bottom'],
                            xField: 'dt',
                            yField: 'w_level',
                            title: '水位',
                            label:
                            {
                                display: '水位',
                                field: 'w_level',
                                renderer: function (v) { return v >> 0; },
                                'text-anchor': 'middle'
                            },
                            style:
                            {
                                fill: "#0000FF",
                                stroke: "#0000FF",
                                'stroke-width': 2
                            },
                            markerConfig:
                            {
                                type: 'circle',
                                radius: 3,
                                size: 1,
                                fill: "#0000FF",
                                'stroke-width': 0
                            },
                            highlight:
                            {
                                size: 3,
                                radius: 3
                            }
                        }
                   ]
                }
            ]
        });

        $(window).bind
        (
            "resize",
            function ()
            {
                //调整表格宽度
                Common.AdjustPanelSize('comparison_station_panel', 'body_content');
            }
        );

        //调整表格宽度
        Common.AdjustPanelSize('comparison_station_panel', 'body_content');
    }
);
